<!--
  Generated template for the HomePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="twitter">
    <ion-buttons slot="start" style="background-color:white;border-radius:4px;" (click)="openSearch()">
      <button ion-button icon-start color="dark" style="width:100%;font-size:15px">
        <ion-icon name="search"></ion-icon>
        <span style="text-align: left">热门搜索</span> 
        </button>
    </ion-buttons>
  </ion-navbar>
  <!-- pageNumber：当前屏幕可以显示的类型数目  -->
  <!-- <my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="5" [selectedIndex]='pageIndex'></my-slide> -->
  <ion-slides class="slide-title" #menuSlides [slidesPerView]="menuNum"  [pager]="false"> 
    <ion-slide *ngFor="let slide of menuData; let i = index;">
      <div (click)="onSlideClick(i)">
          <span class="slide-title-unit" [ngClass]="{'slide-title-active': currIndex == i}">{{slide.name}}</span>
      </div>
    </ion-slide>
  </ion-slides>
</ion-header>
<!-- 
  <ion-content padding>  是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
-->
<!-- <ion-content id="home" style="background-color:yellow;">
  <ion-slides class="slide-content" direction="horizontal" #contentSlides (ionSlideDidChange)="slideChanged()" style="height:auto" (ionSlideDrag)="disableRefresh($event)"> 
    <ion-slide *ngFor="let slide of menuData">
      <ion-content style="width:100%;height:100vh; background-color:red;" fullscreen>
        <ion-refresher (ionRefresh)="doRefresh($event)" [enabled]="isAtTop" *ngIf="isAtTop">
            <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在加载中..."></ion-refresher-content>
        </ion-refresher>
        <ion-list style="padding-right:16px;">  
          <ion-item *ngFor="let item of temphHomeArticles" (click)="openArticles($event, item.url)">  
            <div *ngIf="item.type == 1">
              <div class="list-left" style="float:left; width:65%;">
                <div class="list-title">{{item.title}}</div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
              </div>
              <div class="list-picture"><img src="{{item.images}}" alt=""></div>
            </div>
            <div *ngIf="item.type == 2" class="border-div">
                <div class="list-title">{{item.title}}</div>
                <div class="list-picture2">
                  <img src="{{pic}}" mode='widthFix' alt="" *ngFor="let pic of item.images">
                </div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
            </div>
          </ion-item>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)" immediate-check="false">
            <ion-infinite-scroll-content
              loadingSpinner="bubbles"
              loadingText="正在加载更多数据">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>
    </ion-slide>
  </ion-slides>
</ion-content> -->
<ion-content style="width:100%;height:100vh;">
    <ion-refresher (ionRefresh)="doRefresh($event)" [enabled]="isAtTop" *ngIf="isAtTop">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在加载中..."></ion-refresher-content>
    </ion-refresher>
  <ion-slides class="slide-content" direction="horizontal" #contentSlides (ionSlideDidChange)="slideChanged()" style="height:auto" (ionSlideDrag)="disableRefresh($event)"> 
    <ion-slide *ngFor="let slide of menuData">
        <ion-list style="padding-right:16px;">  
          <ion-item *ngFor="let item of temphHomeArticles" (click)="openArticles($event, item.url)">  
            <div *ngIf="item.type == 1 && item.video != 1" class="div-list">
              <div class="list-left" style="float:left; width:66%;">
                <div class="list-title">{{item.title}}</div>
                <div style="margin-top:14px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
              </div>
              <div class="list-picture"><img src="{{item.images}}" alt=""></div>
            </div>
            <div *ngIf="item.type == 2 && item.video != 1" class="border-div">
                <div class="list-title">{{item.title}}</div>
                <div class="list-picture2">
                  <img src="{{pic}}" mode='widthFix' alt="" *ngFor="let pic of item.images">
                </div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
            </div>
            <div *ngIf="item.video == 1" class="border-div">
                <!-- preload="auto" -->
                <div class="list-title2">{{item.title}}</div>
                <video src="{{item.video_url}}" controls="true" height="210" width="100%" poster="{{item.images[0]}}" preload="auto" playsinline webkit-playsinline id='myVideo'></video> 
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
                <!-- <vg-player class="video-container">
                    <vg-overlay-play></vg-overlay-play>
                    <vg-buffering></vg-buffering> 
                    <vg-controls *ngIf="!item.controls" [vgAutohide]="true" [vgAutohideTime]="2">
                      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
                      <vg-scrub-bar>
                        <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
                        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                      </vg-scrub-bar>
                      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
                      <vg-fullscreen></vg-fullscreen>
                    </vg-controls>
                    <video #myMedia [vgMedia]="myMedia" id="{{item.id}}" class="video-js vjs-default-skin vjs-fluid" 
                    height="210" width="100%" preload="auto" 
                    poster="{{item.images[0]}}"
                     playsinline webkit-playsinline crossorigin>
                        <source src="{{item.video_url}}" type="video/mp4">
                    </video>
                </vg-player>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div> -->
              </div>
          </ion-item>
        </ion-list>
    </ion-slide>
  </ion-slides>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="正在加载更多数据">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>






